import styled from 'styled-components'


const Border1px = (Comp,border='0.01rem 0.01rem 0.01rem 0.01rem',borderColor='orange') => {
  return styled(Comp)`
   position: relative;
  &::after {
    content: "";
    position: absolute;
    top: 0px;
    width: 100%;
    height:100%;
    left: 0px;
    border-width:${()=>border};
    border-style:solid;
    border-color:${()=>borderColor};
    pointer-events:none;
  border-radius:${(props) => {
      return props.radius
    }}rem;
    transform-origin:0 0;
  }

  @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5) {
    &::after {
      width:150%;
      height:150%;
      border-radius:${(props) => {
      return props.radius * 1.5
    }}rem;
      transform: scale(0.667);
    }
  }

  @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
    &::after {
      width:200%;
      height:200%;
      border-radius:${(props) => {
      //todo
      return props.radius * 2
    }}rem;
      transform: scale(0.5);
    }
  }

  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
    &::after {
      width:300%;
      height:300%;
      border-radius:${(props) => {
      return props.radius * 3
    }}rem;
      transform: scale(0.333);
    }
  }

`
}


export default Border1px;